<script setup>
import CommodityCard from "@/components/scenic-card/ScenicCard.vue"
import HotelCart from "@/components/hotel-card/HotelCart.vue"
import HotPotCart from "@/components/Hot-Pot-cart/HotPotCart.vue"
import api from "@/api/index.js"
import { useRouter } from "vue-router"
import {defineProps, ref, watch, defineEmits, computed} from "vue"
import { userStore } from "@/stores/user.js"

const props = defineProps({
  update: Number,
  scenicActive: String
})
const user = userStore()
const router = useRouter()
const emit = defineEmits(['isLoading'])

watch(
  () => props.update,
  () => {
    getList()
  }
)
watch(() => props.scenicActive, () => {
  getList()
})

const hotelList = ref([])
const hotPotList = ref([])

const totalCountHotel = ref(0)
const _getHotelList = () => {
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 2,
    scenicType: 1,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  }
  api.getHomeHotelList(params).then((res) => {
    totalCountHotel.value = res.data.totalCount
    hotelList.value = res.data?.list ?? []
  }).finally(() => {
    loading.value = false
  })
}

const totalCountHotPot = ref(0)
const _getHotPotList = () => {
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 2,
    scenicType: 1,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  }
  api.getHomeHotPotList(params).then((res) => {
    totalCountHotPot.value = res.data.totalCount
    hotPotList.value = res.data?.list ?? []
    hotPotList.value = hotPotList.value.filter(item => item)
  }).finally(() => {
    loading.value = false
  })
}

const loading = ref(false)
const scenicList = ref([])

const goScenicListClick = () => {
  router.push({
    path: 'result/list',
    query: {
      type: props.scenicActive
    }
  })
};

const totalCountScenic = ref(0)
const _getSelectedScenicSpots = () => {
  loading.value = true
  const params = {
    pageNum: 1,
    pageSize: 2,
    scenicType: 1,
    lon: user.position?.coords?.longitude,
    lat: user.position?.coords?.latitude
  }
  emit('isLoading', true)
  api
    .getScenicSpotsList(params)
    .then((res) => {
      scenicList.value = res.data?.list ?? []
      totalCountScenic.value = res.data.totalCount
      scenicList.value.forEach((item) => {
        item.coverImageList = item?.coverImage?.split(",") || []
      })
    })
    .finally(() => {
      loading.value = false
      emit('isLoading', false)
    })
}

const getList = () => {
  console.log('props.scenicActive', props.scenicActive)
  if (props.scenicActive === 'attractionTickets' && !scenicList.value?.length) {
    _getSelectedScenicSpots()
  } else if (props.scenicActive === 'hotel' && !hotelList.value?.length) {
    _getHotelList()
  } else if (props.scenicActive === 'hotPot' && !hotPotList.value?.length) {
    _getHotPotList()
  }
}
getList()


const getTitle = () => {
  if (props.scenicActive === 'attractionTickets') {
    return '精选景区'
  }
  if (props.scenicActive === 'hotel') {
    return '精选酒店'
  }
  return '精选店铺'
}

const totalCount = computed(() => {
  if (props.scenicActive === 'attractionTickets') {
    return totalCountScenic.value
  } else if (props.scenicActive === 'hotel') {
    return totalCountHotel.value
  } else {
    return totalCountHotPot.value
  }
})
</script>

<template>
  <div v-if="totalCount" class="scenic">
    <div class="header">
      <div>
        <h3>{{ getTitle() }}</h3>
        <div class="line"></div>
      </div>
    </div>
    <div>
      <template v-if="!loading">
        <div v-show="scenicActive === 'attractionTickets'">
          <CommodityCard
            v-for="item in scenicList"
            :key="item.id"
            :data="item"
            class="card"
          />
        </div>
        <div v-show="scenicActive === 'hotel'">
          <HotelCart
            v-for="item in hotelList"
            :key="item.id"
            :data="item"
            class="card"
          />
        </div>
        <div v-show="scenicActive === 'hotPot'">
          <HotPotCart
            v-for="item in hotPotList"
            :key="item.id"
            :data="item"
            class="card"
          />
        </div>
      </template>
      <template v-else>
        <CommodityCard
          v-for="(item, index) in Array(1)"
          :key="index"
          :loading="loading"
          :data="item"
          class="card"
        />
      </template>
    </div>
    <div class="more">
      <div  class="more_button" @click="goScenicListClick">
        <img class="more_icon" src="@/assets/images/index/more.png" alt="">
        <span>查看更多</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.scenic {
  padding: 0 1.5rem;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
    height: 2.5rem;
    h3 {
      font-size: 1.8rem;
      color: #333333;
      font-weight: bold;
    }
    .line {
      width: 3rem;
      height: 0.5rem;
      background: linear-gradient(
        90deg,
        var(--van-primary-color) 0%,
        #fbeaa8 92%
      );
    }
  }
  .card {
    margin-bottom: 1.5rem;
  }
  .more {
    display: flex;
    justify-content: center;
    background-color: #F9F8F3;
    padding: 0.5rem 0 2rem 0;
    font-size: 1.4rem;
    color: #cccccc;
    text-align: center;
    .more_button{
      display: flex;
      align-items: center;
      height: 3.8rem;
      background: rgba(79,172,145,0.06);
      border-radius: .5rem;
      border: 1px solid #4FAC91;
      padding: 0 2.2rem;
      color: var(--van-primary-color);
      .more_icon{
        margin-right: .6rem;
        width: 1.5rem;
        height: 1.5rem;
      }
    }
    .more_button:active{
      background: rgb(236, 238, 236);
    }
  }
}
</style>